import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { Header, Footer, Author, Advert } from '../components/Index'
import { Row, Col, List, Breadcrumb } from 'antd'
import { CalendarOutlined, FolderOpenOutlined, FireOutlined, FileTextOutlined } from '@ant-design/icons'
import axios from 'axios'
import servicePath from '../config/apiUrl'
import { timeConversion } from '../utils/index'

const Home = (result) => {
  const [myList, setMyList] = useState(result.data)

  useEffect(() => {
    setMyList(result.data)
  })
  return (
    <div>
      <Head>
        <title>{result.listName}</title>
      </Head>
      <Header />
      <Row className='comm_main' justify='center'>
        <Col className='comm_left' xs={24} sm={24} md={16} lg={18} xl={14}>
          <div className='comm_box'>
            <div className='bread_box'>
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item>{result.listName}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <List
              header={<div className='ml10'>最新日志</div>}
              itemLayout='horizontal'
              dataSource={myList}
              renderItem={item => (
                <List.Item>
                  <div className='list_title'>
                    <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                      <a>{item.title}</a>
                    </Link>
                  </div>
                  <div className='list_icon'>
                    <CalendarOutlined /><strong>{timeConversion(item.addTime)}</strong>
                    <FolderOpenOutlined /><strong>{item.typeName}</strong>
                    <FireOutlined /><strong>{item.view_count}人</strong>
                  </div>
                  <div className='list_context'>{item.introduce}</div>
                  <div className='list_bot'>
                    <FileTextOutlined />
                    <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                      <a><strong>查看全文&nbsp;&nbsp;&gt;</strong></a>
                    </Link>
                  </div>
                </List.Item>
              )}
            ></List>
          </div>
        </Col>

        <Col className='comm_right' xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  )
}

const getListById = id => {
  return new Promise((resolve, reject) => {
    axios.get(`${servicePath.getListById}${id}`)
      .then(res => {
        resolve(res.data)
      }).catch(error => {
        console.log('getListById:', error)
        reject(error)
      })
  })
}

const checkListId = id => {
  switch (id) {
    case '1':
      return '视频教程'
    case '2':
      return '快乐生活'
  }
}

Home.getInitialProps = async (params) => {
  const result = await getListById(params.query.id)
  result.listName = checkListId(params.query.id)
  return result
}

export default Home
